<template>
    <div>
        <el-dialog :title="`${isEdit ? '修改' : '新增'}角色`" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="true" :visible.sync="visible" width="50%" @close="close">
            <el-form :model="form" :rules="adminRules" ref="roleForm">
                <el-form-item v-for="item in formData" :key="item.key" :label="item.label" :label-width="formLabelWidth"
                    :prop="item.key">
                    <el-input v-if="item.type === 'input'" v-model="form[item.key]" :placeholder="`请输入${item.label}`"
                        autocomplete="off" class="w-100"/>
                    <el-input-number v-if="item.type === 'inputNumber'" v-model="form[item.key]" :min="0"
                        :max="10000" class="w-100"/>
                    <el-select v-if="item.type === 'select'" :label-width="formLabelWidth" v-model="form[item.key]"
                        :placeholder="`请选择${item.label}`" class="w-100">
                        <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value">
                        </el-option>
                    </el-select>
                    <el-switch v-if="item.type === 'switch'" v-model="form[item.key]" active-text="正常"
                        inactive-text="停用" :active-value="1" :inactive-value="0" class="w-100"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="sub" :loading="loading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { formData } from './options';

export default {
    props: ['visible', 'isEdit', 'formData', 'loading'],
    data() {

        return {
            form: {},
            formLabelWidth: '120px',
            adminRules: {}
        }
    },
    created() {

    },
    methods: {
        close() {
            this.$emit('close');
        },
        add() {
            console.log(formData);
            const form = {};
            formData.forEach(item => {
                form[item.key] = item.value;
            });
            this.form = form;
            this.open(formData);
        },
        open(data) {
            console.log('-----',data);
            
            const form = {};
            const rules = {};

            data.forEach(item => {
                form[item.key] = item.value;
                rules[item.key] = [
                    {
                        required: item.required !== false, // 默认required为true
                        message: `请${item.type.includes('input') ? '输入' : '选择'}${item.label}`,
                        trigger: item.type === 'select' ? 'change' : 'blur'
                    }
                ];
            });
            form['dataScope'] = Number(form['dataScope'])
            this.form = form;
            console.log(form);

            this.adminRules = rules;
        },
        sub() {
            this.$refs.roleForm.validate((res) => {
                if (res) {
                    this.$emit('submit', this.form);
                }
            })
        }
    },
}
</script>

<style lang='scss' scoped>
.w-100 {
    width: 100%;
}
</style>